<template>
    <div class="table">
        <div class="content-common">
           <el-row type="flex" class="row-bg" justify="space-between" style="padding-bottom:20px">
            
             <el-col :span="6"><el-button type="primary"  @click="prepage()">返回</el-button></el-col>
             <el-col :span="10" style="text-align:right" >
           			<el-row>
						<el-col :span="6">
							<el-button type="primary" icon="download" @click="xiazaimuban">下载模板</el-button>
						</el-col>
						<el-col :span="6">
							<el-button icon="plus" @click="handleAdd"  type="primary">新增单条</el-button>
						</el-col>
						<el-col :span="6">
							<el-upload
							:headers="headers"
							  :action="daoruUrl"
							  :show-file-list="false"
												 :on-success="filesuccess"
							  >
							  <el-button icon="upload"  type="primary">批量导入</el-button>
							</el-upload>

						</el-col>
						<el-col :span="6">
							<el-button type="primary" icon="download" @click="daochuexcell">导出记录</el-button>
						</el-col>
					</el-row>
					
             </el-col>
           </el-row>
          

		   <div style="font-size:18px;text-align:center;font-weight:bold;padding-bottom:8px">
			{{topInfo.stnm}}逐日降水量记录表
		   </div>
		  <div>

			
			      
			<span style="margin-right:12px">观测年: <span style="color:red">{{topInfo.year}}</span>  </span>
			
			
			<span>雨量站:<span style="color:red">{{topInfo.rainStation}}</span></span>

			<span style="padding-left:30px">经度：{{topInfo.jingdu}}  E</span>
			<span style="padding-left:30px">纬度：{{topInfo.weidu}}   N</span>
			
		  </div>

            <el-table
                :data="tableData"
                border
               
                class="table-common"
              
                header-cell-class-name="table-header"
               
            >
               
               <el-table-column align="center" prop="month" label="月"></el-table-column>
                <el-table-column align="center" prop="day" label="日"></el-table-column>
				<el-table-column align="center" prop="drp" label="降雨量(mm)"></el-table-column>
				
			
				<el-table-column align="center" prop="flowFlag" label="是否产流">
					<template #default="scope">
					<!--  <span>{{scope.row.flowFlag==1?'是':'否'}}</span> -->
						<el-switch
						  v-model="scope.row.flowFlag"
						  @change="flowFlagChange(scope.row)"
						   :active-value="1"
						    :inactive-value="0"
						  >
						</el-switch>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="observer" label="观测人"></el-table-column>
				<el-table-column align="center" prop="reviewer" label="审核人"></el-table-column>
				<el-table-column align="center" prop="remark" label="备注"></el-table-column>
				
                <el-table-column label="操作" width="300" align="center">
                    <template #default="scope">
                        <el-button type="primary"  @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="danger"   @click="handleDelete(scope.row)"
                            >删除</el-button
                        >
					
						
                    </template>
                </el-table-column>
            </el-table>
			
			
		
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog :title="logTitle" v-model="editVisible" width="500px">
            <el-form ref="form" :model="form" label-width="160px" :rules="rules" label-position="top">
				<el-row type="flex" justify="space-between">
				    <el-col :span="11">
						<el-form-item label="月" prop="month">
							<el-select v-model="form.month" filterable placeholder="请选择">
							    <el-option  
							      v-for="item in 12"
							      :key="item"
							      :label="item"
							      :value="item">
							    </el-option>
											
							</el-select>
						  
						</el-form-item>
					</el-col>
				  <el-col :span="11">
						<el-form-item label="日" prop="day">
							<el-select v-model="form.day" filterable placeholder="请选择">
							    <el-option  
							      v-for="item in 31"
							      :key="item"
							      :label="item"
							      :value="item">
							    </el-option>
											
							</el-select>
						  
						</el-form-item>
						
					</el-col>
				 </el-row>
				 <el-row type="flex" justify="space-between">
				     <el-col :span="11">
				 		<el-form-item label="观测人" prop="observer">
				 		    <el-input v-model="form.observer" placeholder="请输入观测人"></el-input>
				 		  </el-form-item>
				 	</el-col>
				    <el-col :span="11">
				 		<el-form-item label="审核人" prop="reviewer">
				 		    <el-input v-model="form.reviewer" placeholder="请输入审核人"></el-input>
				 		</el-form-item>
				 	</el-col>
				  </el-row>
				 <el-row type="flex" justify="space-between">
				     <el-col :span="11">
				 		<el-form-item label="降雨量(mm)" prop="drp">
				 		      <el-input v-model="form.drp" placeholder="请输入降雨量(mm)"></el-input>
				 		  </el-form-item>
				 	</el-col>
				   <el-col :span="11">
				 		<el-form-item label="是否产流" prop="flowFlag">
						   <el-select v-model="form.flowFlag" filterable placeholder="请选择">
							   <el-option  
							   
								 label="是"
								 :value="1">
							   </el-option>
								<el-option
								
								  label="否"
								  :value="0">
								</el-option>		
						   </el-select>
				 		   
				 		</el-form-item>
				 		
				 	</el-col>
				  </el-row>
				  <el-row type="flex" justify="space-between">
				      <el-col :span="11">
				  		<el-form-item label="备注">
				  		    <el-input v-model="form.remark" placeholder="备注"></el-input>
				  		</el-form-item>
				  	</el-col>
				    <el-col :span="11">
				  		
				  		
				  	</el-col>
				   </el-row>
             
            </el-form>
			<template #footer>
				<span  class="dialog-footer">
		      
			  <el-button type="primary" @click="saveEdit">确 定</el-button>
		  		</span>
			</template>
        </el-dialog>
    </div>
</template>

<script>


import { reportrainRecordviewselect2Record,
soilWaterrunoffFieldrecordrainRecordeditupdateDetail,
soilWaterrunoffFieldrecordrainRecordviewlistRainfall2Record,
sysdictviewlistDictItem,reportfieldManageeditdoApprove,reportfieldManageeditrevokeRecord,reportfieldManageeditsubmitRecord,
viewPageStationInfo,rainfallImportRainfallDaily,reportrainRecordviewlistDetail, reportrainRecordsaveaddDetail, 
reportrainRecordremovedelDetail } from '../../../api/index';
import moment from 'moment'
export default {
    name: 'rijiangyujilumingxi',
    data() {
        return {
			headers: {
			  Authorization: sessionStorage['token']
			},
			topInfo:{},
			status:'/',
			rules: {
			  month: [
				{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  day: [
								{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  drp: [
								{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  flowFlag: [
				{ required: true, message: '必填项', trigger: 'change' }
			  ]
			},
			shenpilog:false,
			globalUser:[],
			page:{
				currentPage: 1,
				pageSize: 10,
				totalPage: 0,
				totalSize: 0
			},
            query: {
                year:moment().format('YYYY')
            },
			excelllog:false,
            formInline: {},
            tableData: [],
           
            editVisible: false,
            logTitle: '',
            pageTotal: 0,
            form: {
               year:moment().format('YYYY')
            },
			stationData:[],
			checkArr:[],
			tijiaoform:{
				
			},
			selnow:null,
			nyearData:[],
			daoruUrl:''
        };
    },
    created() {
		this.topInfo={
			stnm:this.$route.query.stnm,
			rainStation:this.$route.query.rainStation,
			year:this.$route.query.year
		}
		this.daoruUrl =
      globalVar.jingliujiangyuUrl + "/soilWater/runoffField/record/rainRecord/import/importRecordDetail?headNo="+this.$route.query.recordNo;
		this.status=this.$route.query.status
		this.globalUser=globalUser
        let that = this;
        that.getData();
		this.getstationData()
		this.getchecktype()
		this.getmingxi()
		this.huoqumingxinew()
    },
    methods: {
		huoqumingxinew(){
			let that=this		
			soilWaterrunoffFieldrecordrainRecordviewlistRainfall2Record({
				stcd:this.$route.query.stcd,
				year:this.$route.query.year,
				stType:systype
			}).then(e=>{
				
				let data=e.object.map(item=>{
					item.flowFlag=0
					item.headNo=that.$route.query.recordNo
					item.observer=stationInfo.observerName,
					item.observerName=stationInfo.observerName,
					item.reviewer=stationInfo.reviewerName
					item.reviewerName=stationInfo.reviewerName
					return item
				})
				 reportrainRecordsaveaddDetail(data).then((e2) => {
				    console.log(e2,'??????????????????????????')
				    this.getData();
				 });
				
			}).catch(err2=>{
				console.log(err2)
			})
		},

		filesuccess(e){
			if(e.code==5000){
				this.$message.error(e.object);
			}else{
				 this.$message.success("操作成功");
			}
			
			this.getData()
			
		},
		daochuexcell(){
			let headNo=this.$route.query.recordNo
			window.location.href=globalVar.jingliujiangyuUrl+'/soilWater/runoffField/record/rainRecord/export/exportRecordData?headNo='+headNo
		},
		xiazaimuban(){
			let that=this
			window.location.href=globalVar.jingliujiangyuUrl+'/soilWater/runoffField/record/rainRecord/download/downloadTemp'
			 
			
			this.$message.success('下载成功');
		},
		getmingxi(){
			let that=this
			reportrainRecordviewselect2Record({
				stcd:this.$route.query.stcd,
				year:this.$route.query.year
			}).then(e=>{
				that.nyearData=e.object.map(item=>{
					
					item.headNo=that.$route.query.recordNo
					delete item.detailNo
					return item
				})
				//that.saveEdit(that.nyearData)
			}).catch(err=>{
				console.log(err)
			})
		},
		prepage(){
			 this.$router.go(-1);
		},
		quedingtijiao(){
			this.tijiaoform.relatedNo=this.selnow.recordNo
			let that=this
			reportfieldManageeditdoApprove(that.tijiaoform).then(e=>{
				that.$message.success('操作成功');
				that.shenpilog=false
			}).catch(e=>{
				console.log(err)
			})
		},
		getchecktype(){
			let that=this
			sysdictviewlistDictItem({
				dictCode:'ZD-000004'
			}).then(e=>{
				that.checkArr=e.object
			}).catch(err=>{
				console.log(err)
			})
		},
		shenpi(item){
			this.shenpilog=true
			this.selnow=item
			
		},
		getstationData() {
			let data={
				currentPage:1,
				pageSize:1000
			}
			let that=this
		    viewPageStationInfo(data).then((res) => {
		       
				let stationData = res.object.dataList.filter(item=>{
                    return item.stcd===that.$route.query.stcd
                })[0];

				this.topInfo.jingdu=stationData.latitude
				this.topInfo.weidu=stationData.longitude
				
				
		       
		       
		    });
		},
		daorujiangyu(){
			let that=this
			rainfallImportRainfallDaily(that.form).then(e=>{
				console.log(e)
			}).catch(err=>{
				console.log(err)
			})
		},
      
        getData() {
			let data={
				headNo:this.$route.query.recordNo

			}
            reportrainRecordviewlistDetail(data).then((res) => {
               
                this.tableData = res.object;
               
                
            });
        },
        // 触发搜索按钮
        handleSearch() {
           
            this.getData();
        },
        // 删除操作
        handleDelete(row) {
            let that=this
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    reportrainRecordremovedelDetail({
						headNo:that.$route.query.recordNo,
						data:[row.detailNo]
					} ).then((e) => {
                        this.$message.success('删除成功');
                        this.getData();
                    });
                })
                .catch(() => {});
        },
		chehui(row){
			
			this.$confirm('确定撤回吗？', '提示', {
			    type: 'warning'
			})
			    .then(() => {
					
					
					reportfieldManageeditrevokeRecord({
						headNo:row.recordNo
					}).then(e=>{
						
						this.getData();
					}).catch(err=>{
						console.log(err)
					})
			       
			    })
			    .catch(() => {});
		},
        tijiao(row){
			
			this.$confirm('确定提交吗？', '提示', {
			    type: 'warning'
			})
			    .then(() => {
					
					
					reportfieldManageeditsubmitRecord({
						headNo:row.recordNo
					}).then(e=>{
						
						this.getData();
					}).catch(err=>{
						console.log(err)
					})
			       
			    })
			    .catch(() => {});
			
		},
        // 编辑操作
        handleEdit(row) {
            this.form = row;
           
            this.logTitle = '编辑日降雨明细';
           
            this.editVisible = true;
        },
        handleAdd() {
            this.logTitle = '新增日降雨明细';
            this.form = {
				flowFlag:0,
				observer:stationInfo.observerName,
				reviewer:stationInfo.reviewerName
            };
            this.editVisible = true;
        },
		flowFlagChange(item){
			
			let data=JSON.parse(JSON.stringify(item))
			// console.log(data.flowFlag,'????????????')
			// if(data.flowFlag==1){
			// 	data.flowFlag=0
			// }else{
			// 	data.flowFlag=1
			// }
			
			// console.log(data)
			
			soilWaterrunoffFieldrecordrainRecordeditupdateDetail(data).then((e) => {
			    
			    this.$message.success('操作成功');
			    this.getData();
			});
		},
        // 保存编辑
        saveEdit() {
            let that=this
			that.form.headNo=this.$route.query.recordNo
			 reportrainRecordsaveaddDetail([that.form]).then((e) => {
			     this.editVisible = false;
			     this.$message.success('操作成功');
			     this.getData();
			 });
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>

